<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 目标效果：当我点击Dell时，下面的Lee会变成Dell，当
        我点击Lee时，上面的Dell也会变成Lee，这就涉及到兄弟组件之间的传值问题 -->
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>

    <script>

        // 在每一个组件上挂载一个bus属性，都指向同一个vue实例
        Vue.prototype.bus = new Vue()


        // 1.定义一个全局子组件
        Vue.component("child", {
            // 对父组件传过来的content进行校验
            props: {
                content: String
            },
            template: "<div @click='handleClick'>{{content}}</div>",
            methods: {
                handleClick: function () {
                    // 点击Dell输出Dell，点击Lee输出Lee
                    alert(this.content)

                    // 怎么传值？
                    // 触发change事件，同时携带content
                    this.bus.$emit('change', this.content)
                }
            },
        })


        var vm = new Vue({
            el: '#app',
            data: {

            }

        })
    </script>
</body>

</html>